<template>
    <div class="orderList">
        <div class="display-box top-select">
            <div class="mid" id="topSelect">
                <a href="#popover" id="openPopover" class="mid">
                    <span v-show="title==1">全部订单</span>
                    <span v-show="title==2">钣喷订单</span>
                    <span v-show="title==3">保养订单</span>
                    <span class=" mui-icon mui-icon-arrowdown"></span>
                </a>
            </div>
            <div id="popover" class="mui-popover">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell"><a href="javascript:;" @click="change('ALL')">全部订单</a></li>
                    <li class="mui-table-view-cell"><a href="javascript:;" @click="change('BP')">钣喷订单</a></li>
                    <li class="mui-table-view-cell"><a href="javascript:;" @click="change('BY')">保养订单</a></li>
                </ul>
            </div>
            <div class="mui-table-view mui-table-view-cell" id="choose">
                <span class=" active flex-1" id="allItem" @click="search('ALL')">全部</span>
                <span class=" flex-1" id="needHandleItem" @click="search('DCL')">待处理</span>
                <span class=" flex-1" id="needRepairItem" @click="search('DWX')">待服务</span>
                <span class=" flex-1" id="needCommentItem" @click="search('DPJ')">待评价</span>
            </div>
            <div id="orderContent" class="tabBox mui-content" v-el:wrapper v-cloak>
                <div class="">
                    <!--没有所有订单时显示-->
                    <div class="notOrder" v-if="maintenanceOrders.length==0">
                        <div class="orderIcon mui-text-center">
                            <i class="icon-daipingjia color7 text6-size"></i>
                        </div>
                        <p class="evaluateText mui-text-center color2 text2-size">暂无相关订单</p>
                    </div>
                    <img  class="loading status-ico" src="../../images/loading.svg" alt="" v-if="sta==1">
                    <img  class="status-ico" src="../../images/success.svg" alt="" v-if="sta==2">
                    <img class="status-ico" src="../../images/before.svg" alt="" v-if="sta==0">
                    <div class="status-ico" v-if="sta==3">
                        没有更多内容了
                    </div>
                    <!--有所有订单时显示-->
                    <template v-for="(index,item) in maintenanceOrders">
                        <ul  class="mui-table-view mgb1" v-link="{name:'orderDetail',params:{id:item.orderCode}}" v-if="item.orderType=='BP'" track-by="$index">
                            <li class="mui-table-view-cell orderTitle" >
                                <p class="col-8  text3">
                                    <span class="color1">订单编号:</span>
                                    <span class="color1">{{item.orderCode}}</span>
                                </p>
                                <p v-if="item.orderStatus==1 || item.orderStatus==2" class="col-4 mui-text-right orderType untreated">待处理</p>
                                <p v-if="item.orderStatus==3" class="col-4 mui-text-right orderType notRepair">待维修</p>
                                <p v-if="item.orderStatus==5" class="col-4 mui-text-right orderType finish">已完成</p>
                                <p v-if="item.orderStatus==4" class="col-4 mui-text-right orderType notEvaluate">待评价</p>
                                <p v-if="item.orderStatus==6" class="col-4 mui-text-right orderType alreadyClosed">已关闭</p>
                            </li>
                            <li class="mui-table-view-cell orderText">
                                <p class="text2">{{item.enterpriseName}}</p>
                                <p class="text3">
                                    <span>预估报价：</span>
                                    <span>{{item.orderTotalAmount | currency '￥' 2}}</span>
                                </p>
                            </li>
                            <li v-if="item.orderStatus==1 || item.orderStatus == 2" class="mui-table-view-cell orderOperate">
                                <button class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-right text3-size" v-link="{name:'orderCancel',params:{id:item.orderCode}}">取消订单</button>
                            </li>
                            <li v-if="item.orderStatus==4" class="mui-table-view-cell orderOperate">
                                <button class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-right text3-size" @click="doComment(item.id,item.enterpriseName)">评价服务</button>
                            </li>
                        </ul>

                        <ul class="mui-table-view mgb1" v-if="item.orderType=='BY'" v-link="{name:'maintenanceOrderDetail',params:{id:item.orderCode}}" track-by="$index">
                          <li class="mui-table-view-cell ">
                              <p class="col-8 text3">
                                  <span class="color1">订单编号:</span>
                                  <span>{{item.orderCode}}</span>
                              </p>
                              <p v-if="item.orderStatus==0" class="col-4 untreated mui-text-right">待处理</p>
                              <p v-if="item.orderStatus==1" class="col-4 mui-text-right orderType notRepair">待维养</p>
                              <p v-if="item.orderStatus==2" class="col-4 mui-text-right orderType notRepair">维养中</p>
                              <p v-if="item.orderStatus==3" class="col-4 mui-text-right orderType notRepair">维养完成</p>
                              <p v-if="item.orderStatus==5" class="col-4 mui-text-right orderType finish">订单取消</p>
                              <p v-if="item.orderStatus==6" class="col-4 mui-text-right orderType finish">订单关闭</p>
                              <p v-if="item.orderStatus==40" class="col-4 mui-text-right orderType notEvaluate">待评价</p>
                              <p v-if="item.orderStatus==41" class="col-4 mui-text-right orderType notEvaluate">已评价</p>
                          </li>
                          <li class="mui-table-view-cell">
                              <p class="col-8 font-normal">{{item.carXh}}</p>
                              <p class="col-4 mui-text-right">{{item.carXslc}}km</p>
                              <p class="col-8 font-light font-12">{{item.carDate}}</p>
                              <p class="col-4 font-light font-12 mui-text-right">行驶里程</p>
                          </li>
                          <li class="mui-table-view-cell ">

                              <span class="col-12 text3 mui-text-right">合计:<strong class="font-18 font-normal color-or">￥{{item.orderSum}}</strong></span>
                          </li>
                          <li v-if="item.orderStatus==1 || item.orderStatus == 0" class="mui-table-view-cell orderOperate">
                                <button class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-right text3-size" v-link="{name:'maintenanceOrderCancel',params:{id:item.orderCode}}">取消订单</button>
                            </li>
                            <li v-if="item.orderStatus==40" class="mui-table-view-cell orderOperate">
                                <button class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-right text3-size" @click="doCommentm(item.id,item.enterpriseName)">评价服务</button>
                            </li>
                      </ul>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <footer-nav-component index="ucenterHome"/>
</template>
<style>
    .orderList .tabClick{z-index: 997; background-color: #fff; height: 1rem; line-height: 1rem; box-sizing: border-box; border-bottom: 1px solid #f0f0f0;}
    .orderList .tabBox{ position:absolute; z-index: 100; box-sizing: border-box; padding-bottom: 1rem;top:88px;width:100%;}
    .orderList .tabClick>div{height: 1rem; line-height: 1rem; padding: 0 0.1rem; box-sizing: border-box;}
    .orderList .tabClick>div>a{height: 1rem; line-height: 1rem;}
    .orderList .tabClick>div>a>span{height: 1rem; line-height: 1rem;}
    .orderList .mui-control-content {height: auto; overflow: hidden;}
    .orderList .mui-segmented-control{font-size: 0.3rem; line-height:0.6rem}
    .orderList .mui-control-content{background-color: inherit !important;}
    .orderList .orderType{font-size: .28rem !important; line-height: 0.4rem !important;}
    .orderList .notConfirm{color: #ff0000;}
    .orderList .untreated{color: #ff0000;}
    .orderList .notEvaluate{color: #00b050;}
    .orderList .notRepair{color: #0070c0;}
    .orderList .finish{color: #000000;}
    .orderList .orderOperate{height: 1rem;}
    .orderList .orderOperate>.mui-btn{width:1.5rem; padding: 0.08rem 0.1rem !important;}
    .orderList #choose span {flex:1;float: left;width: 25%;text-align: center;}
    .orderList .active{color: #007aff!important;border-bottom: 2px solid #007aff;}
    .orderList .mui-segmented-control .mui-control-item {line-height: 0.8rem;}
    .orderList .Operate{width:1.5rem; font-size: .28rem; padding: 0.08rem; border-radius: 5px; border: 1px solid #2f77e3; color:#2f77e3;}
    .top-select {background-color: #f7f7f7;top:0;left:0;width:100%;height:45px;z-index: 1000!important;}
    .mid{margin: 0 auto;width:100%;padding:10px 0;}
    .btn-bar{height:1rem;}
    .color-or{color: #ff8317!important ;}
    .status-ico{position:absolute;left:calc(50% - 16px);bottom:60px;}
    .loading{animation: spin 1s linear infinite;}
    [v-cloak] {
			display: none;
		}
    @keyframes spin
		{
		    0%   {transform: rotate(0deg);}
		    100% {transform: rotate(360deg);}
		}
</style>
<script type="text/ecmascript-6">
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    import iScroll from '../../components/pullRefresh/iscroll.js'
    export default new Page({
        data(){
            return{
                maintenanceOrders:[],
                type:'ALL',
                status:'ALL',
                pageSize:10,
                pageNo:1,
                count:"",
                title:1,
                boxHeight:'',
                pageIndex:2,
                sta:'',
                page:''
            }
        },
        computed :{
            needHandle:function () {
                var needConfirm = this.orderSplit(1);
                needConfirm.push.apply(needConfirm,this.orderSplit(2));
                return needConfirm;
            },
            needRepair:function () {
                return this.orderSplit(3);
            },
            needComment:function () {
                return this.orderSplit(4);
            },
        },
        methods:{
            orderSplit:function (status) {
                var rtn = [];
                for (var i in this.maintenanceOrders) {
                    var order = this.maintenanceOrders[i];
                    if(order.orderType=='BP'){
                        if (order.orderStatus == status) {
                            rtn.push(order);
                        }
                    }else if(order.orderType=='BY'){
                        if(order.orderStatus == '0' ){
                            if (order.orderStatus + 2 == status) {

                                rtn.push(order);
                            }
                        }else if(order.orderStatus == '1'){
                            if (order.orderStatus + 2 == status) {

                                rtn.push(order);
                            }
                        }else if(order.orderStatus == '40'){
                            if (order.orderStatus -36 == status) {

                                rtn.push(order);
                            }
                        }
                    }

                }
                return rtn;
            },
            doComment:function (id,commentObject) {
                var data = {objectId:id,commentObject:commentObject,commentType:1};
                var param = JSON.stringify(data);
                this.$route.router.go('/comment/create?param=' + encodeURI(param));
            },
            doCommentm:function (id,commentObject) {
                var data = {objectId:id,commentObject:commentObject,commentType:3};
                var param = JSON.stringify(data);
                this.$route.router.go('/maintenanceComment/create?param=' + encodeURI(param));
            },
            getJson:function(type,status,pageSize,pageNo){
                let that = this;
                that.maintenanceOrders=[];
                this.getJSON(API.GET_ALL_ORDER,{
                    type:type,
                    status:status,
                    pageSize:pageSize,
                    pageNo:pageNo
                },res=>{
                    res.resultData.list.forEach(function(item){
                        that.maintenanceOrders.push(item);
                    })
                    this.count = res.resultData.count;
                    that.page = Math.ceil(that.count/10);
                    setTimeout(function(){
                        //延迟加载为获得wrapper的高度
                        that.initPullRefresh();
                    },50);

                })
            },
            change:function(zt){
                var zt=zt;
                if(zt=="ALL"){
                    this.type='ALL';
                    this.getJson(this.type,this.status,this.pageSize,this.pageNo);
                    this.title=1;
                }else if(zt=="BP"){
                    this.type='BP';
                    this.getJson(this.type,this.status,this.pageSize,this.pageNo);
                    this.title=2;
                }else if(zt=="BY"){
                    this.type='BY';
                    this.getJson(this.type,this.status,this.pageSize,this.pageNo);
                    this.title=3;
                }
            },
            search:function(item){
                this.status=item;
                this.getJson(this.type,item,this.pageSize,this.pageNo);
            },
            initPullRefresh:function(){
                let that = this;
                var myscroll;
                var isRefresh = false;
                setTimeout(function(){
                    myscroll = new iScroll(that.$els.wrapper,{
                        topOffset:0,
                        onScrollMove:function(){
                        that.sta = 0;
                        //如果上拉高度 大于 (内容高度 - wrapper高度) 50px 以上  且是未刷新状态时触发 ;
       					if(this.y <= ( this.wrapperH - this.scroller.clientHeight -50) && isRefresh == false && that.pageIndex<=that.page){
       						//正在加载状态
       						isRefresh = true;
       						setTimeout(function(){
       							//这里表示数据加载成功后
       							that.doAjax();
                                   that.pageIndex++;
       							//这里表示渲染完成后刷新wrapper
       							setTimeout(function(){
       								//显示加载成功状态图标 (没有更多数据时候的提示作用)
       								that.sta = 2;
       								setTimeout(function(){
       									that.sta = "";
       								},500)
       								//加载完成状态
       								isRefresh = false;
       								myscroll.refresh();
       							},0)
       						},1000)

       					}else{
                               that.sta = 3;
                           }
                        }
                    })
                },0)
            },
            doAjax:function(i){
                let that = this;
                that.getJSON(API.GET_ALL_ORDER,{
                    type:that.type,
                    status:that.status,
                    pageSize:that.pageSize,
                    pageNo:i
                },res=>{
                    console.log('AJAX已加载');
                    res.resultData.list.forEach(function(item){
                        that.maintenanceOrders.push(item);
                    })

                })
            }

        },
        components:{
            footerNavComponent
        },
        ready () {
            let that = this;
            /*链接相应订单*/
            var tab = this.$route.params.tab;
            function siblings(elm) {
                var a = [];
                var p = elm.parentNode.children;
                for(var i =0,pl= p.length;i<pl;i++) {
                    if(p[i] !== elm) a.push(p[i]);
                }
                return a;
            };
            //访问接口数据
            this.getJson(this.type,this.status,this.pageSize,this.pageNo);
        }
    });
</script>
